<template>
  <div class="loginBasePan" >
    <div class="onePan" ></div>
    <div class="logoPan" >LOGO</div>
    <div style="height:20px;" ></div>
    <div class="inputPan" >
        <a-input v-model:value="username" placeholder="请输入用户名" maxlength="100" >
            <template #prefix>
                <user-outlined type="user" />
            </template>
        </a-input>
        <div style="height:10px;" ></div>
        <a-input-password v-model:value="password" placeholder="请输入密码" @pressEnter="submitRegist" maxlength="100" >
            <template #prefix>
                <lock-outlined />
            </template>
        </a-input-password>
        <div style="height:10px;" ></div>
        <a-input-password v-model:value="password2" placeholder="再次输入密码" @pressEnter="submitRegist" maxlength="100" >
            <template #prefix>
                <check-circle-outlined />
            </template>
        </a-input-password>
        <div style="height:20px;" ></div>
        <a-button style="width:100%;" type="primary" @click="submitRegist" >注册</a-button>
        <div style="height:10px;" ></div>
        <div class="registrPan" >
            已有账号？点击
            <a @click="toLogin" >登录</a>
        </div>
    </div>
  </div>
</template>

<script>
import { defineComponent,ref } from 'vue';
import { UserOutlined, LockOutlined, CheckCircleOutlined } from '@ant-design/icons-vue';
import { useRouter } from 'vue-router';
import { message } from 'ant-design-vue';
import { UserPrefix } from '@/utils/cacheEnum'
export default defineComponent({
    name:'RegistrIndex',
    components:{
        UserOutlined,
        LockOutlined,
        CheckCircleOutlined,
    },
    setup() {
        const username = ref('');
        const password = ref('');
        const password2 = ref('');

        const router = useRouter();
        const toLogin = ()=>{
            router.replace({
                path: '/login',
                name: 'Login',
            });
        }

        const submitRegist = ()=>{
            if(username.value==''){
                message.error('请输入用户名');
                return;
            }
            if(password.value==''){
                message.error('请输入密码');
                return;
            }
            if(password.value!=password2.value){
                message.error('两次密码输入不一致');
                return;
            }
            let myItem = sessionStorage.getItem(UserPrefix+username.value);
            if(myItem!=null){
                message.error("注册失败，用户名已存在。");
            }else{
                sessionStorage.setItem(UserPrefix+username.value,password.value);
                message.success("注册成功！");
                toLogin()
            }
        }
        return {
            toLogin,
            username,
            password,
            password2,
            submitRegist
        }
    }
})
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.loginBasePan{
    background-color: rgb(255, 255, 255);
    .onePan{
        width: 100%;
        height: 20px;
    }
    .logoPan {
        border: solid 1px rgb(95, 99, 104);
        border-radius: 50px;
        width: 80px;
        height: 80px;
        line-height: 80px;
        margin: 0 auto;
        background-color: rgb(104, 142, 255);
        color: white;
        text-align: center;
    }
    .inputPan{
        width: 80%;
        margin: 0 auto;
    }
    .registrPan{
        text-align: right;
    }
}
    
</style>
